<template>
  <div id="app">
    <router-view>
        
    </router-view>
    <div class="phone" id="default_drag_comp"
         @click="goNext"
         @touchstart="down"
         @touchmove="move"
         @touchend="end">
      <i class="fa fa-envelope" aria-hidden="true"></i>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant';
export default {
    name: 'App',
    data() {
        return {
            flags: false,
            position: { x: 0, y: 0 },
            nx: "",
            ny: "",
            dx: "",
            dy: "",
            xPum: "",
            yPum: ""
        };
    },
    methods:{
        goNext() {
            this.$emit("goNext");
        },
        // 实现移动端拖拽
        down() {
            let default_drag_comp = document.querySelector("#default_drag_comp");
            this.flags = true;
            var touch;
            if (event.touches) {
                touch = event.touches[0];
            } else {
                touch = event;
            }
            this.maxW = document.body.clientWidth - default_drag_comp.offsetWidth;
            this.maxH = document.body.clientHeight - default_drag_comp.offsetHeight;

            this.position.x = touch.clientX - default_drag_comp.offsetLeft;
            this.position.y = touch.clientY - default_drag_comp.offsetTop;
            this.dx = touch.clientX;
            this.dy = touch.clientY;
        },
        move(event) {
            event.preventDefault();
            let default_drag_comp = document.querySelector("#default_drag_comp");
            if (this.flags) {
                var touch;
                if (event.touches) {
                    touch = event.touches[0];
                } else {
                    touch = event;
                }
                this.nx = touch.clientX - this.position.x;
                this.ny = touch.clientY - this.position.y;

                if (this.nx < 0) {
                    this.nx = 0;
                } else if (this.nx > this.maxW) {
                    this.nx = this.maxW;
                }

                if (this.ny < 0) {
                    this.ny = 0;
                } else if (this.ny >= this.maxH) {
                    this.ny = this.maxH;
                }

                default_drag_comp.style.left = this.nx + "px";
                default_drag_comp.style.top = this.ny + "px";
                //阻止页面的滑动默认事件；如果碰到滑动问题，1.2 请注意是否获取到 touchmove
                document.addEventListener(
                    "touchmove",
                    function() {
                        // event.preventDefault();
                    },
                    false
                );
            }
        },
        //鼠标释放时候的函数
        end() {
            this.flags = false;
        }
        // move(e) {
        //     let odiv = e.target;    //获取目标元素
        //
        //     //算出鼠标相对元素的位置
        //     let disX = e.clientX - odiv.offsetLeft;
        //     let disY = e.clientY - odiv.offsetTop;
        //     document.onmousemove = (e) => {    //鼠标按下并移动的事件
        //         //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        //         let left = e.clientX - disX;
        //         let top = e.clientY - disY;
        //
        //         //绑定元素位置到positionX和positionY上面
        //         this.positionX = top;
        //         this.positionY = left;
        //
        //         //移动当前元素
        //         odiv.style.left = left + 'px';
        //         odiv.style.top = top + 'px';
        //     };
        //     document.onmouseup = (e) => {
        //         document.onmousemove = null;
        //         document.onmouseup = null;
        //     };
        // }
    }

    // directives: {
    //     drag: {
    //         // 指令的定义
    //         bind: function ($refs) {
    //             let odiv = $refs;   //获取当前元素
    //             oDiv.onmousedown = (e) => {
    //                 //算出鼠标相对元素的位置
    //                 let disX = e.clientX - odiv.offsetLeft;
    //                 let disY = e.clientY - odiv.offsetTop;
    //
    //                 document.onmousemove = (e)=>{
    //                     //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
    //                     let left = e.clientX - disX;
    //                     let top = e.clientY - disY;
    //
    //                     //绑定元素位置到positionX和positionY上面
    //                     this.positionX = top;
    //                     this.positionY = left;
    //
    //                     //移动当前元素
    //                     odiv.style.left = left + 'px';
    //                     odiv.style.top = top + 'px';
    //                 };
    //                 document.onmouseup = (e) => {
    //                     document.onmousemove = null;
    //                     document.onmouseup = null;
    //                 };
    //             };
    //         }
    //     }
    // }
}
</script>

<style lang="scss">
body,html,#app{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .phone{
    position: fixed;
    width: 0.6rem;
    height: 0.6rem;
    background-color: rgb(0, 122, 255);
    border-radius: 50%;
    bottom: 0.8rem;
    right: 0;
    i{
      display: block;
      font-size: 0.22rem;
      text-align: center;
      line-height: 0.6rem;
      color: #fff;
    }
  }
}
*{
  margin: 0;
  padding: 0;
  list-style: none;
}
body{
  font-size: 0.16rem;
}
>>>.van-button{
    margin-left: 0 !important;
}
</style>
